<include file="mobile/Public/header" />
<link rel="stylesheet" href="__CSS__/index.css">
<link rel="stylesheet" href="__CSS__/fonts.css">
<link rel="stylesheet" href="__CSS__/swiper/swiper.min.css">
<link rel="stylesheet" href="__CSS__/swiper.css">
<link rel="stylesheet" href="__CSS__/goodlist.css">
<link rel="stylesheet" href="__CSS__/product-list.css">
<style>
    <if condition="$_GET['list'] eq 1">
    /*horn*/
    .horn-aside{ min-height: 3rem;overflow: hidden}
    .horn-aside .horn-icon{ margin-left: 0}
    .horn-aside .horn-icon>img{ width: 2rem ;position: relative;top: 0.4rem}
    .horn-aside .horn-brief{ margin-left: 2.8rem ;white-space: nowrap;overflow: hidden}
    .horn-auto-scroll{
        position: relative;left: 0;
    }
    /**/
    .index-section{
        background: white;
        min-height: 100px;
        margin: 0.84rem;
        width: 43%;
        float: left;
    }
    .index-section-title{
        padding: 5px;
        margin: 0 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -moz-binding: url('ellipsis.xml#ellipsis');
        display: inline-block;
    }
    .index-section-pic-box{
        position: relative;
        width: 90%;
        display: inline-block;
        float: left;
        overflow: hidden;
    }
    .index-section-pic{
        min-height: 5rem;
        width: 100%;
    }
    .section-pic-tips-group{
        position: absolute;
        top: 0;left: -4px;z-index: 10;
    }
    .section-pic-tips{
        margin-top: 5px;
        color: white;
        min-width: 3rem;
        text-align: center;
        padding: 0.2rem 0.5rem;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        box-shadow: 1px 1px 4px rgba(0,0,0,.3)
    }
    .index-section-footer{
        text-align: left;
        padding: 10px;
        position: relative;
        display: inline-block;
        width: 90%;
        max-height: 1rem;
        overflow: hidden;
    }
    .section-btn-group{
        position: absolute;
        top: -1.95rem;left: 0;
    }
    .section-btn-group section{
        border: thin solid #333333;
        border-radius: 50%;
        float: left;
        width: 3rem;height: 3rem;
        text-align: center;
        margin-left: 1rem;
        background: white;
    }
    .section-btn-group section img{
        width: 1.6rem;
        vertical-align: middle;
    }
    .echo-img{
        min-height: 9rem;
        margin: 3px;
        background: #FFF url(/Application/Shop/Static/images/loaading.gif) no-repeat center center;
    }
    .fl{float: left;}
    .fr{float: right;}
    .w60{width: 90%}

    </if>
      .goodlist-cats-select {
          padding-left: 1em;
          border-top: thin solid #e2e2e2;
          border-bottom: thin solid #e2e2e2;
          position: absolute;
          top: 100%;
          left: 0;
          background: white;
          width: 100%;
      }
    .goodlist-cats-select li{
        line-height: 2.5;
        border-bottom: thin solid #e2e2e2;
    }
    .goodlist-cats-select li:last-child{
        border-bottom: 0
    }
    .goodlist-cats-select .text-active:after{
        content: '';
        width: 1em;height: 0.5em;
        display: inline-block;
        float: right;
        border-left: 2px solid #fd9801;
        border-bottom: 2px solid #fd9801;
        border-bottom-left-radius: 2px;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);      /* IE 9 */
        -webkit-transform: rotate(-45deg);  /* Safari and Chrome */
        -o-transform: rotate(-45deg);       /* Opera */
        -moz-transform: rotate(-45deg);     /* Firefox */
        margin-top: 0.7em;
        margin-right: 0.7em;
    }
</style>
<header class="bg-primary search-header color-main">
    <div class="header-search border-box vertical-box">
        <input id="search" class="border-box" type="text" placeholder="请输入关键字">
        <div class="search-btn-container vertical-box"><i class="search-btn vertical-middle border-box index-icon icon-search"></i></div>
    </div>
    <div class="header-left vertical-box" onclick="history.back()">
        <span class="vertical-middle">
            <img class="img-btn" src="__IMG__/back.png">
        </span>
    </div>
    <div class="header-right vertical-box" >
        <span id="trigger" class="vertical-middle">搜索</span>
    </div>
</header>

<div class="main">
    <!--边栏分类导航-->
    <aside class="nav-aside">
            <ul id="cloth-nav" data-trigger="test">
                <li class="active"><a href="#type1" data-toggle="tab" >面料类别1</a></li>
                <li><a href="#type2" data-toggle="tab" >面料类别2</a></li>
                <li><a href="#type3" data-toggle="tab" >面料类别3</a></li>
                <li><a href="#type4" data-toggle="tab" >面料类别4</a></li>
                <li><a href="#type5" data-toggle="tab" >面料类别5</a></li>
                <li><a href="#type6" data-toggle="tab" >面料类别6</a></li>
            </ul>

    </aside>

    <!--商品主体列表-->
    <section class="product-container tab-content" data-target="test" >
        <article class="tab-pane active" id="type1" >
            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth01.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth01.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth01.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth01.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>
        </article>

        <article class="tab-pane" id="type2" >
            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth02.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth02.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

        </article>

        <article class="tab-pane" id="type3" >
            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth03.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth03.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth03.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

        </article>

        <article class="tab-pane" id="type4" >
            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth01.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth02.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

        </article>
        <article class="tab-pane" id="type5" >
            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth02.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

        </article>
        <article class="tab-pane" id="type6" >
            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth03.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

            <div class="product-item-wrap">
                <div class="product-item">
                    <img src="__IMG__/cloth02.JPG" alt="">
                    <p class="title">面料名</p>
                </div>
            </div>

        </article>
    </section>

</div>



<include file="mobile/Public/nav-footer" />
<include file="mobile/Public/footer" />

<script>
    (function () {
        function Tab(option) {
            this.tabList = document.querySelector(option.tabList)  ; //菜单列表容器
            var trigger = this.tabList.getAttribute("data-trigger"); //用来识别对应目标容器
            this.target = document.querySelector(".tab-content[data-target=" +  trigger + "]");//目标容器
            this.tabPanes = Array.prototype.slice.call( this.target.getElementsByClassName("tab-pane") ); //，，目标tab-pane 元素数组
            this.tabListItems = this.tabList.querySelectorAll("li");
        }

        Tab.prototype.init = function () {
            this.bindEvent();
        };

        //显示选项卡
        Tab.prototype.show = function(elem) {
            var tabPane = document.querySelector( elem.getAttribute("href") );

            elem.parentNode.classList.add("active");
            tabPane.classList.add('active');

        };

        //隐藏全部
        Tab.prototype.hideAll = function() {
            this.tabListItems.forEach(function (item) {
                item.classList.remove("active");
            });
            this.tabPanes.forEach(function (item) {
                item.classList.remove("active");
            })
        };


        Tab.prototype.bindEvent = function() {
            var This = this;
            This.tabList.addEventListener('click',function (e) {
                e = e || window.event;
                var target = e.target ||e.srcElement;

                if (target.getAttribute('data-toggle') == 'tab' ){
                    This.hideAll();
                    This.show(target);
                }

                e.preventDefault();
                return false
            })

        };

        window.Tab = Tab;
    })();

    var myTab = new Tab({
        tabList: "#cloth-nav"
    });

    myTab.init();




</script>
</body>
</html>